<template>
<div class="chart">
  <div class="title">
    <i class="pre"></i>
    <span class="text">{{ name }}</span>
    <i class="back"></i>
  </div>
  <!-- 图表放在这里 接受传来的图表 -->
  <slot name="main"></slot>
</div>
</template>

<script setup>
  import {  } from 'vue'
  const { name } = defineProps({
    name: {
      type: String,
      required: true
    }
  })
  // console.log(name)
</script>

<style lang="less" scoped>
.chart {
  padding: 8px 15px;
  .title {
    display: flex;
    align-items: center;
    height: 22px;
    margin-bottom: 7px;
    .pre {
      background-position: 0px 0px;
    }
    .back {
      background-position: 100% 0px;
    }
    i {
      background: url('@/assets/title.png');
      background-size: 142px auto; // 原图的一半
      width: 15px; // 全缩小一半
      height: 13px; // 全缩小一半
      // width: 30px;
      // height: 26px;
      display: inline-block;
      vertical-align: middle;
    }
    .text {
      font-weight: 700;
      margin: 0 12px;
      // flex-grow: 1;
      text-align: center;
      font-size: 15px;
      line-height: 26px;
      color: #FFFFFF;
    }
  }
}
</style>